<template>
  <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell  newf"  @click='newfFun({name:"新的朋友",action: "添加朋友"})'>
                <p class="mui-media-object mui-pull-left mui-newf">
                    <span class="mui-icon-extra mui-icon-extra-addpeople">
                        <span class="mui-badge" v-if='computeCurrentOPFriendsP && computeCurrentOPFriendsP.readNum'>{{computeCurrentOPFriendsP.readNum}}</span>
                    </span>
                </p>
                <div class="mui-media-body">
                    新的朋友
                </div>
            </li>
            <li class="mui-table-view-cell groupf" @click='newfFun({name:"群聊",action: "search"})'>
                <p class="mui-media-object mui-pull-left mui-groupf">
                    <span class="mui-icon-extra mui-icon-extra-peoples"></span>
                </p>
                <div class="mui-media-body">
                    发起群聊
                </div>
            </li>
            <li class="mui-table-view-cell textf" @click='newfFun({name:"标签",action: "新建"})'>
                <p class="mui-media-object mui-pull-left mui-textf">
                    <span class="mui-icon-extra mui-icon-extra-people"></span>
                </p>
                <div class="mui-media-body">
                    标签
                </div>
            </li>
            <li class="mui-table-view-cell contentf" @click='newfFun({name:"公众号",action: "search"})'>
                <p class="mui-media-object mui-pull-left mui-contentf">
                    <span class="mui-icon-extra mui-icon-extra-topic"></span>
                </p>
                <div class="mui-media-body">
                    订阅
                </div>
            </li>
        </ul>
  </div>
</template>
<script>
 import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['getTotalUnreadNumlg100', 'computeCurrentOPFriendsP'])
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            // var self = this
            // self.$immui('ul').on('tap', '.newf', function(e) {
            //     console.log(1111)
            // })
        },
        newfFun(obj) {
            console.log(obj, '8888888888888888888888888')
            let self = this
            switch (obj.name) {
                case '新的朋友':
                    self.$router.push({name: 'newfriends', query: {name: obj.name, action: obj.action}})
                    break
                case '群聊':
                    self.$router.push({name: 'group', query: {name: obj.name, action: obj.action}})
                    break
                case '标签':
                    // let options = {
                    //   groupId: '67823452880897',
                    //   success: function(resp) {
                    //       console.log(resp, '"Response: *************"')
                    //   },
                    //   error: function() {}
                    // }
                    // this.$imconn.getGroupInfo(options)
                    self.$router.push({name: 'connectlabel', query: {name: obj.name, action: obj.action}})
                    console.log('标签')
                    break
                case '公众号':
                    break
                default:
                    console.log('请重新点击')
                    break
            }
        }
    }
  }
</script>
<style lang='scss' scoped>
.mui-table-view .mui-media-body{
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    padding-left: 20px;
    box-sizing: border-box;
}
.mui-table-view-cell{
    padding: 8px 0px;
}
.mui-table-view .mui-media-object{
    width: 42px;
    // height: 42px;
    line-height: 50px;
    text-align: center;

}
.mui-table-view .mui-media-object.mui-pull-left{
    margin-right: 0;
}
.newf, .groupf, .textf, .contentf {
    overflow: hidden;
}
.mui-newf{
    background: rgb(247, 221, 104);
    position: relative;
    top: 0;
    left: 0;
    .mui-badge{
        position: absolute;
        right: -8px;
        top: -4px;
        color: white;
        font-weight: 700;
        background: red;
    }
}
.mui-groupf{
    background: rgb(143, 243, 112);
}
.mui-textf{
    background: rgb(176, 211, 231);
}
.mui-contentf{
    background: rgb(176, 211, 231);
}
</style>
